<template>
  <div class="column">
    <div class="add-menu">
      <el-button type="primary" @click="showdialogAdd">
        {{ $t('添加菜单') }}
      </el-button>
    </div>
    <div class="table-container">
      <el-table stripe :data="topmenus" style="width: 100%; height: 100%">
        <el-table-column prop="name" label="菜单名称" />
        <el-table-column prop="path" label="菜单地址" />
        <el-table-column prop="icon" label="菜单图标" />
        <el-table-column prop="createTime" label="创建时间" />
      </el-table>
    </div>
    <el-dialog v-model="dialogAddVisible" title="添加菜单">
      <el-form
        :model="addMenuForm"
        class="pl-3 pr-3"
        label-width="5em"
        style="width: 62%; margin: auto"
      >
        <el-form-item label="父级菜单">
          <el-select v-model="addMenuForm.parent">
            <el-option
              v-for="item in topMenus"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="菜单名称">
          <el-input v-model="addMenuForm.name" />
        </el-form-item>
        <el-form-item label="路径">
          <el-input v-model="addMenuForm.path" />
        </el-form-item>
        <el-form-item label="图标">
          <el-input v-model="addMenuForm.icon" />
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number v-model="addMenuForm.sort" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogAddVisible = false">
            {{ $t('Cancel') }}</el-button
          >
          <el-button type="primary" @click="onSubmitAddMenu">{{
            $t('Confirm')
          }}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { shios } from '@/api/Shios';
import { onBeforeMount, reactive, ref } from 'vue';
import { topMenu, TopMenu } from './Menus';
const topMenuKeys = Object.keys(topMenu);
console.log(topMenuKeys);
const topMenus: TopMenu[] = reactive([
  {
    name: '顶级分类',
    path: '',
    id: 0,
    createTime: new Date(),
    icon: '',
  },
]);
const topmenus = ref<Array<TopMenu>>([]);
onBeforeMount(async () => {
  const res = await shios.get<TopMenu[]>('topMenus');
  if (res.data) {
    topmenus.value = res.data;
  }
  topMenus.push(...topmenus.value);
});

const dialogAddVisible = ref(false);
/**
 * 弹出添加菜单对话框
 */
async function showdialogAdd() {
  dialogAddVisible.value = true;
}
const addMenuForm = reactive({
  name: '',
  path: '',
  sort: 0,
  parent: undefined,
  icon: '',
});
/**
 * 提交表单
 */
async function onSubmitAddMenu() {
  console.log(addMenuForm);
  let url = '';
  if (addMenuForm.parent == 123) {
    url = 'topMenus';
  }
  // const res = await shios.post('topMenus', { data: addMenuForm });
  // console.log(res);
}
</script>

<style lang="scss" scoped>
.column {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.table-container {
  flex: 1;
}
</style>
